<template>
  <div
    class="van_popover van_popper popover_live"
    role="tooltip"
    aria-hidden="true"
    tabindex="0"
    style="transform-origin: center top; z-index: 2061"
  >
    <div class="box f_clear">
      <div class="hot_live">
        <h3 class="title">热门直播:</h3>
        <div class="room_list">
          <a
            :href="`//live.bilibili.com/${item.uid}`"
            target="_blank"
            class="list_tem"
            v-for="item in hotLiveList"
          >
            <img :src="item.imgUrl" class="face" v-if="item.imgUrl" />
            <img
              src="/static/avatar/avatar/default.webp/"
              class="face"
              v-else
            />
            <div class="hover">LIVE</div>
            <p class="uname">{{ item.uname }}</p>
          </a>
        </div>
      </div>
      <div class="hot_act">
        <h3 class="title">热门活动:</h3>
        <div class="act_list">
          <a
            :href="item.href"
            target="_blank"
            class="list_tem"
            v-for="item in hotActList"
          >
            <img :src="item.imgUrl" class="banner" />
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hotLiveList: [
        {
          uname: "残月夜明",
          uid: "8860692",
          imgUrl: "/static/avatar/avatar/live_1.webp",
        },
        {
          uname: "一只大大大大大萌狼",
          uid: "304523",
          imgUrl: "/static/avatar/avatar/live_2.webp",
        },
        {
          uname: "LB绿",
          uid: "22998483",
          imgUrl: "/static/avatar/avatar/live_3.webp",
        },
        {
          uname: "新奇异主播兼UP主",
          uid: "24208584",
          imgUrl: "/static/avatar/avatar/live_4.webp",
        },
        {
          uname: "天草筱会长是我的",
          uid: "1458289",
          imgUrl: "/static/avatar/avatar/live_5.webp",
        },
        {
          uname: "綾瀬暁宏",
          uid: "1096897",
          imgUrl: "",
        },
      ],
      hotActList: [
        {
          imgUrl: "/static/banner/live/1.jpg",
          href: "//www.bilibili.com/blackboard/live/activity-63ztLnOyNp.html",
        },
        {
          imgUrl: "/static/banner/live/2.png",
          href: "//live.bilibili.com/activity/live-activity-full/fontana_di_trevi_2021/pc.html?is_live_webview=1#/",
        },
      ],
    };
  },
  methods: {
  },
};
</script>

<style lang="scss">
.van_popover.van_popper.popover_live {
  padding: 0;
  top: 45px !important;
  left: -68px;
  border: none;
  background: transparent;
  box-shadow: none;
}
.popover_live {
  width: 528px;
  height: 266px;
}
.f_clear {
  &::after,
  &::before {
    content: "";
    display: table;
    clear: both;
  }
}
.box {
  box-sizing: content-box !important;
  width: 508px;
  padding: 20px 0 20px 20px;
  min-height: 225px;
  border-radius: 0 0 4px 4px;
  box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.4);
  background-color: #fff;
  .hot_live {
    float: left;
    width: 254px;
    .room_list {
      font-size: 12px;
      margin-top: 5px;
      border-right: 1px solid #eaeaea;
      .list_tem {
        position: relative;
        display: inline-block;
        width: 64px;
        margin: 10px 17px 0 0;
        .face {
          width: 64px;
          height: 64px;
          border-radius: 50%;
        }
        .hover {
          position: absolute;
          top: 0;
          left: 0;
          width: 64px;
          height: 64px;
          line-height: 64px;
          text-indent: 22px;
          border-radius: 50%;
          opacity: 0;
          background-color: rgba(0, 0, 0, 0.5);
          font-size: 15px;
          color: #fff;
          font-weight: 700;
          transform: scale(0);
          transition: all 0.2s cubic-bezier(0.22, 0.58, 0.12, 0.98);
          &::before {
            content: "";
            top: 26px;
            left: 8px;
            position: absolute;
            width: 12px;
            height: 12px;
            background-color: #ff699e;
            border-radius: 50%;
          }
        }
        .uname {
          margin: 3px;
          text-align: center;
          color: #000;
          width: 100%;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        &:hover .hover {
          opacity: 1;
          transform: scale(1);
        }
      }
    }
  }
  .hot_act {
    width: 229px;
    float: left;
    padding-left: 21px;
    .act_list {
      .list_tem {
        display: block;
        padding: 10px 21px;
        margin-left: -21px;
        width: 208px;
        height: 80px;
        box-sizing: content-box;
        .banner {
          display: block;
          width: 100%;
          height: 100%;
          border-radius: 3px;
        }
        &:hover {
          background-color: #eaeaea;
        }
      }
    }
  }
  .title {
    font-size: 14px;
    font-weight: 700;
    color: #ea759f;
    margin: 0;
  }
}
</style>